
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Wizard Test Page - small widths</title>

	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<link rel="stylesheet" type="text/css" href="./styles/Wizard_test_mobile.css">
</head>

<body class="wizard_test_mobile1auto">
	<div class="stretch wizard_test_mobile2auto" >
		<div class="wizard_test_mobile3auto">
			<ui5-wizard id="wizTest">
				<ui5-wizard-step icon="sap-icon://product" title-text="Product type">
					<div class="wizard_test_mobile4auto">
						<ui5-title>1. Product Type</ui5-title><br>
						<ui5-message-strip>
							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
						</ui5-message-strip><br>
					</div>
				</ui5-wizard-step>

				<ui5-wizard-step title-text="Product Information">
					<div class="wizard_test_mobile5auto">
						<ui5-title>2. Product Information</ui5-title><br>
						<ui5-label>
							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
						</ui5-label>
					</div>
				</ui5-wizard-step>

				<ui5-wizard-step title-text="Options">
						<ui5-title>3. Options</ui5-title><br>
						<ui5-label>
							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
						</ui5-label>
						<ui5-message-strip>
							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
						</ui5-message-strip><br>
				</ui5-wizard-step>

				<ui5-wizard-step title-text="Pricing" selected>
						<ui5-title>4. Pricing</ui5-title><br>
						<ui5-label>
							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
						</ui5-label>
						<ui5-message-strip>
							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
						</ui5-message-strip><br>
				</ui5-wizard-step>
			</ui5-wizard>

			<ui5-wizard id="wizTest2">
				<ui5-wizard-step icon="sap-icon://product" title-text="Product type" disabled>
					<div class="wizard_test_mobile4auto">
						<ui5-title>1. Product Type</ui5-title><br>
						<ui5-message-strip>
							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
						</ui5-message-strip><br>
					</div>
				</ui5-wizard-step>

				<ui5-wizard-step title-text="Product Information" disabled>
					<div class="wizard_test_mobile5auto">
						<ui5-title>2. Product Information</ui5-title><br>
						<ui5-label>
							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
						</ui5-label>
					</div>
				</ui5-wizard-step>

				<ui5-wizard-step title-text="Options" disabled>
						<ui5-title>3. Options</ui5-title><br>
						<ui5-label>
							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
						</ui5-label>
						<ui5-message-strip>
							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
						</ui5-message-strip><br>
				</ui5-wizard-step>

				<ui5-wizard-step title-text="Pricing" selected>
						<ui5-title>4. Pricing</ui5-title><br>
						<ui5-label>
							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
						</ui5-label>
						<ui5-message-strip>
							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
						</ui5-message-strip><br>
				</ui5-wizard-step>
			</ui5-wizard>
		</div>

	</div>
</body>
</html>
